<script setup>
</script>

<template>
    <div class="data-overview">
        <div class="container">
            <div class="left">
                <div class="left-icon"></div>
                <div class="left-name">业主人数</div>
                <div class="left-count">2318</div>
            </div>
            <div class="center">
                <div class="center-title">当前社区总人数</div>
                <div class="center-count">12530</div>
                <div class="center-name">访客人数</div>
                <div class="center-number">880</div>
            </div>
            <div class="right">
                <div class="right-title">
                    <div class="text">黑名单</div>
                </div>
                <div class="right-count">25</div>
                <div class="right-name">外来人数</div>
                <div class="right-number">74</div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.data-overview {
    height: 100%;
    width: 100%;

    .container {
        display: flex;
        justify-content: space-between;

        .left {
            flex: 0 0 30%;
            height: 100%;

            display: flex;
            flex-direction: column;



            .left-icon {
                background-image: url(../../../assets/img/title.png);
                height: 50px;
                width: auto;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                margin-bottom: 15px;
                margin-top: 8px;
            }

            .left-name {
                background-image: linear-gradient(to right, rgb(21, 123, 165), rgb(77, 76, 157));
                color: #fff;
                text-align: center;
                font-size: 13rem;
                line-height: 40rem;
            }

            .left-count {
                color: rgb(157, 206, 254);
                font-size: 13rem;
                text-align: center;
                line-height: 40rem;
            }
        }

        .center {
            flex: 0 0 30%;

            .center-title {
                margin: auto;
                margin-top: 7px;
                font-size: 13rem;
                color: rgb(81, 91, 231);
                width: 90px;

                white-space: nowrap;
                /* 保持文本在一行显示 */
                overflow: hidden;
                /* 隐藏溢出的内容 */
                text-overflow: ellipsis;
                /* 显示省略号 */
            }

            .center-count {
                color: rgb(157, 206, 254);
                font-size: 25rem;
                margin-top: 5px;
                margin-bottom: 15px;
                text-align: center;
            }

            .center-name {
                background-image: linear-gradient(to right, rgb(21, 123, 165), rgb(77, 76, 157));
                color: #fff;
                text-align: center;
                font-size: 13rem;
                line-height: 40rem;
            }

            .center-number {
                color: rgb(157, 206, 254);
                font-size: 13rem;
                text-align: center;
                line-height: 40rem;
            }
        }

        .right {
            flex: 0 0 30%;

            .right-title {
                margin-top: 7px;

                color: rgb(157, 206, 254);
                font-size: 13rem;
                text-align: center;

                .text {
                    margin: auto;
                    padding: 2px 0;
                    width: 50%;
                    background-color: rgba(255, 255, 255, .3);
                }
            }

            .right-count {
                color: rgb(157, 206, 254);
                margin-top: 5px;
                margin-bottom: 15px;
                text-align: center;
                font-size: 23rem;
            }

            .right-name {
                background-image: linear-gradient(to right, rgb(21, 123, 165), rgb(77, 76, 157));
                color: #fff;
                text-align: center;
                font-size: 16rem;
                line-height: 40rem;
            }

            .right-number {
                color: rgb(157, 206, 254);
                font-size: 13rem;
                text-align: center;
                line-height: 40rem;
            }
        }
    }
}
</style>
